/* css Zen Garden submission 217 - 'Screen Filler', by Elliot Jay Stocks, http://elliotjaystocks.com/  */
/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/  */
	
	/* TYPEKIT_KIT_ID: lxq7gid */

	/*
	================================================
	CSS Zen Garden theme for Typekit 01
	================================================
	Handcrafted by Elliot Jay Stocks
	http://elliotjaystocks.com/
	Last updated on 18.11.2013
	================================================
	01	Sensible Defaults
	02	Typography
	03	Layout
	04	Media Queries
	================================================
	*/

	/* ---------------------------------------------------------------------------------------------------------- 
	01 Sensible defaults ----------------------------------------------------------------------------------------
	---------------------------------------------------------------------------------------------------------- */

	* 								{ margin:0; padding:0; /* So sue me */ }

	div,
	article,
	section,
	header,
	footer,
	nav,
	figure,
	li								{ position:relative; } /* For absolutely positioning elements within containers  */
	.group:after 					{ display: block; height: 0; font-size: 0; content: "."; clear: both; visibility: hidden; } /* For clearing */
	*								{ -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } /* Apply a natural box layout model to all elements — see http://paulirish.com/2012/box-sizing-border-box-ftw */

	::-moz-selection 				{ background:#333; color:#fff; }
	::selection 					{ background:#333; color:#fff; }

	/* ---------------------------------------------------------------------------------------------------------- 
	02 Typography -----------------------------------------------------------------------------------------------
	---------------------------------------------------------------------------------------------------------- */
	/*

	14 / 16	= 		0.875em 		(14px equivalent)
	16 / 16	= 		1em 			(16px equivalent)
	18 / 16 = 		1.125em 		(18px equivalent)
	21 / 16 = 		1.3125em 		(21px equivalent)
	24 / 16 = 		1.5em 			(24px equivalent)
	30 / 16 = 		1.875em 		(30px equivalent)
	36 / 16 = 		2.25em 			(36px equivalent)
	48 / 16 = 		3em 			(48px equivalent)
	60 / 16 = 		3.75em 			(60px equivalent)
	72 / 16 = 		4.5em 			(72px equivalent)
	96 / 16 = 		6em 			(96px equivalent)

	*/

	/* Rendering */
	body,
	input,
	textarea 						{ color:#333; /*-webkit-font-smoothing:antialiased;*/ } 

	/* Families */
	body							{ font-family:"tablet-gothic", verdana, arial, sans-serif; /* Weights from Typekit: 300, 400 */ }
	h2,
	h3 								{ font-family:"tablet-gothic-condensed", "arial narrow", arial, verdana, sans-serif; /* Weights from Typekit: 200, 900 */ }

	/* Headings */
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 								{ font-weight:normal; }
	h1 								{ background:#ea2e49; color:#fff; display:inline-block; margin-bottom:1em; padding:0.5em 1em; }
	h2 								{ color:#fff; font-weight:900; /* Heavy */ font-size:6em; letter-spacing:1px; line-height:1em; }
	h3 								{ font-size:2.25em; font-weight:200; /* Thin */ letter-spacing:1px; line-height:1em; padding:0.5em 0 0.25em 0; }

	/* Links */
	a 								{ border-bottom:1px solid rgba(0,0,0,0.2); color:#333; text-decoration:none; -moz-transition:border-color 0.2s ease-in-out; -ms-transition:border-color 0.2s ease-in-out; -o-transition:border-color 0.2s ease-in-out; -webkit-transition:border-color 0.2s ease-in-out; transition:border-color 0.2s ease-in-out; }
	a:hover 						{ border-color:#ea2e49; }
	section.intro div.summary p a,
	div.explanation p a,
	div.participation p a			{ color:#fff; }
	div.participation p a:hover		{ border-color:#fff; }

	/* Paragraph styles */
	p,
	li 								{ font-size:1em; font-weight:400; /* Regular */ line-height:1.5em; padding:0.5em 0; }
	h1,
	section.intro div.summary p,
	div.requirements p:last-child 	{ font-weight:300; letter-spacing:2px; text-transform:uppercase; }
	section.intro div.summary p:last-child, 
	div.requirements p:last-child 	{ border-top:1px solid #ea2e49; margin-top:1em; padding-top:1.5em; }

	/* Other bits & bobs */
	em,
	strong 							{ font-style:normal; font-weight:400; }

	/* ---------------------------------------------------------------------------------------------------------- 
	03 Layout ---------------------------------------------------------------------------------------------------
	---------------------------------------------------------------------------------------------------------- */

	html 							{ background:#daede2; padding:5%; }
	body 							{ background:#77c4d3; }
	div.page-wrapper 				{ z-index:2; }

	section.intro 					{ padding:5%; }
	section.intro div.summary 		{ color:#fff; padding:15% 0; }
	section.intro div.preamble 		{ background:rgba(255,255,255,0.9); color:#333; margin-left:-30%; padding:5% 5% 5% 30%; }
	div.main 						{ padding:5%; }
	aside.sidebar 					{ background:rgba(246,247,146,0.9); padding:5%; }
	aside.sidebar ul 				{ padding:0.5em 0 2em 0; }
	aside.sidebar ul li 			{ color:rgba(0,0,0,0.4); list-style:none; margin:0; padding:0 0 0.825em 0; }
	footer 							{ background:rgba(246,247,146,0.9); clear:both; color:#fff; padding:1em 5%; width:50%; }
	footer a 						{ margin-right:0.5em; }

	div.explanation 				{ color:#fff; padding:5%; }
	div.participation 				{ background:rgba(234,46,73,0.9); color:#fff; padding:5%; }
	div.benefits 					{ background:rgba(255,255,255,0.9); margin-top:10%; padding:5%; }
	div.requirements 				{ background:rgba(255,255,255,0.9); padding:5%; }

	/* ---------------------------------------------------------------------------------------------------------- 
	04 Media queries (using a mobile-first approach) ------------------------------------------------------------
	---------------------------------------------------------------------------------------------------------- */

	/* 1 and up */	
	@media screen and (min-width:1px) {

		body 						{ font-size:85%; }

	}


	/* 550 and up */	
	@media screen and (min-width:550px) {

		h2 							{ font-size:8em; }
		section.intro 				{ width:66.6%; }
		aside.sidebar 				{ position:absolute; right:0; top:2.5%; width:32.75%; }
		div.extra1 					{ background:rgba(51,55,69,0.9); bottom:0; right:0; position:fixed; top:0; width:30%; z-index:1; }
		div.explanation 			{ float:left; width:50%; }
		div.participation 			{ float:left; width:49%; }
		div.benefits 				{ float:left; }
		div.requirements 			{ float:left; }
	}

	/* 650 and up */	
	@media screen and (min-width:650px) {

		div.benefits 				{ margin-top:12%; width:30%; }
		div.requirements 			{ width:69%; }

	}

	/* 700 and up */	
	@media screen and (min-width:700px) {

		body 						{ font-size:90%; }

	}

	/* 800 and up */	
	@media screen and (min-width:800px) {

		body 						{ font-size:100%; }

	}

	/* 900 and up */	
	@media screen and (min-width:900px) {

		body 						{ font-size:110%; }

	}

	/* 1500 and up */	
	@media screen and (min-width:1500px) {

		body 						{ font-size:125%; }

	}

	/* 1800 and up */	
	@media screen and (min-width:1800px) {

		body 						{ font-size:150%; }

	}

	/* 2100 and up */	
	@media screen and (min-width:2100px) {

		body 						{ font-size:175%; }

	}


	/* 2500 and up */	
	@media screen and (min-width:2500px) {

		body 						{ font-size:200%; }

	}

